<template>
    <div style="margin-bottom:56px">
        <v-toolbar dark color="primary" style="box-shadow:none">
            <v-icon @click="$router.back(-1)">keyboard_arrow_left</v-icon>
            <v-toolbar-title>邻里HI圈</v-toolbar-title>
        </v-toolbar>
        <v-layout row wrap style="background:#4caf50">
            <v-flex xs12>
                <v-layout class="search" justify-center align-center>
                    <v-flex offset-xs1 xs10>
                        <input style="heigh:25px;font-size:18px" placeholder="搜索你感兴趣的话题" single-line outline>
                    </v-flex>
                    <v-flex xs1><v-icon>search</v-icon></v-flex>
                </v-layout>
            </v-flex>
        </v-layout>
        <v-layout>
            <v-flex xs12>
                <v-list style="background:#f0f0f0">
                    <span style="font-size: 20px; color: primary; margin-left:10px">我关注的话题</span>
                </v-list>
                <template>
                    <div v-for="(item, index) in topic_follows" :key="index">
                        <v-list-tile avatar>
                            <v-list-tile-avatar>
                                <img src= "../../assets/logo.png" :key="index">
                            </v-list-tile-avatar>
                            <v-list-tile-content @click="$router.push('/neighbor/'+item.topic_title+'/topic')">
                                <v-list-tile-sub-title class="text--primary">{{ item.topic_title}}</v-list-tile-sub-title>
                                <v-list-tile-sub-title>{{ item.num_follow+ "关注 "+item.num_post+ "新内容"}}</v-list-tile-sub-title>
                            </v-list-tile-content>
                            <v-icon @click="defollow">remove_circle</v-icon>
                        </v-list-tile>
                        <v-divider v-if="index + 1 < topic_follows.length" :key="`divider-${index}`"></v-divider>
                    </div>
                </template>
            </v-flex>
        </v-layout>
        <v-layout>
            <v-flex xs12>
                <v-list style="background:#f0f0f0; margin-top:10px">
                    <span style="font-size: 20px; color: primary; margin-left:10px">推荐话题</span>
                </v-list>
                <template>
                    <div v-for="(item, index) in topics" :key="index">
                        <v-list-tile avatar ripple>
                            <v-list-tile-avatar>
                                <img src="../../assets/logo.png" :key="index">
                            </v-list-tile-avatar>
                            <v-list-tile-content  @click="$router.push('/neighbor/'+item.topic_title+'/topic')">
                                <v-list-tile-sub-title class="text--primary">{{ item.topic_title}}</v-list-tile-sub-title>
                                <v-list-tile-sub-title>{{ item.num_follow+ "关注 "+item.num_post+ "新内容"}}</v-list-tile-sub-title>
                            </v-list-tile-content>
                            <v-btn small color=primary @click="follow">关注</v-btn>
                        </v-list-tile>
                        <v-divider v-if="index + 1 < topics.length" :key="`divider-${index}`"></v-divider>
                    </div>
                </template>
            </v-flex>
        </v-layout>
    </div>
</template>

<script>
export default {
    data(){
        return{
            topic_follows: [
                {topic_title: '经济论坛', num_follow: '5', num_post: '10'},
                {topic_title: '宠物天地', num_follow: '6', num_post: '15'},
            ],
            topics: [
                {topic_title: '邻里杂谈', num_follow: '5', num_post: '10'},
                {topic_title: '相亲交友', num_follow: '6', num_post: '7'},
                {topic_title: '嘻嘻哈哈', num_follow: '10', num_post: '19'},
            ]
        }
    },
    methods:{
        defollow(){

        },
        follow(){
            
        }

    }
}
</script>

<style scoped>
.flex.xs4{
    text-align: center
}

.search{
    height:50px;
    background:white;
    border-radius: 25px;
    margin:0 16px 16px 16px;
    padding: 0 10px 0 10px;
}

input:focus{
    outline: none
}
</style>
